<template>
  	<div class="Homechir">
		<h2  class="tit">订单详情</h2>
		<div class="main">
			<p class="title">订单信息</p>	
			<!--  发货状态  -->
			<div class="Homechir-one">     
				<div style="width: 380px;float: left;border-right: 1px solid #E4E9EE;margin-top: 10px;">
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">订单号：{{order.orderNumber}}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">收款单位：{{order.merchantName}}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">支付方式: {{ order.tradingChannels === 0 ? '微信支付' : (order.tradingChannels === 1 ? '支付宝支付' : '线下支付') }}</p>
				</div>
				<div style="width: calc(100% - 480px);float: left;padding: 0 30px;margin: 20px 0 0 45px; ">
					<div class="time" style="width:100%;margin:0 auto 10px;padding:0">
						<span style="width:49%;display:inline-block;height:90%;line-height:26px;">{{order.createTime?order.createTime:''}}</span>
						<span style="width:50%;display:inline-block;height:90%;margin:auto;padding:0;line-height:26px;text-align:right">{{order.notifyTime?order.notifyTime:''}}</span>
					</div>
					<Steps :current="order.notifyTime ? 2 : (order.createTime ? 1 : 0)" align-center process-status="wait">	
						<Step title="订单生成时间" style="width: auto" icon="ios-checkmark"></Step>
						<Step title="支付时间" style="width: auto" icon="ios-checkmark"></Step>
					</Steps>
				</div>
			</div>
		</div>
		<div class="main">
			<p class="title">申请单 / 处方明细</p>
			<!--  订单信息  -->
			<div class="Homechir-sel" style="display: flex;flex-direction: row;min-height: 200px;padding-top: 10px;">
				<div style="width: 380px;float: left;border-right: 1px solid #E4E9EE;" v-if="refund.businessSources != 11">
					<Button type="primary" style="font-size: 14px;border-radius:10px;line-height: 25px;float:right;margin-right:15px" @click="search">查看申请单</Button>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">申请单号: {{ order.orderNumber ? order.orderNumber : '暂无申请单号' }}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">申请单类别: {{ businessObj.inspection ? businessObj.inspection : '暂无申请单类别' }}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">患者姓名: {{ businessObj.memberName ? businessObj.memberName : '暂无患者姓名' }}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">状态: <span style="color: red;">{{ refund.orderStatus === 0 ? '申请中' : (refund.orderStatus === 1 ? '已退款' : (refund.orderStatus === 2 ? '拒绝退款' : (refund.orderStatus === 3 ? '退款中' : '同意退款'))) }}</span></p>
				</div>
				<div style="width: calc(100% - 382px);float: left;min-height: 170px;">
					<div style="width: 90%;margin: 10px auto;">
						<Table
						:columns="columns1"
						:data="data1"
						border
						style="width: 100%;text-align: center;"
						></Table>
						<p v-if="this.data1.length" style="border:1px solid #ccc;border-top:none;font-size: 12px;height: 50px;line-height:50px">
							<span style="padding-left: 100px;">合计</span> 
							<span style="float: right;padding-right: 97px">{{zj}}</span>
						</p>                      
					</div>
					
					<!-- <div style="width: 90%;margin: 0 auto;text-align: center;margin-top:20px">
						<div style="width: 100%;display: flex;flex-direction: row;border: 1px solid #E8E8E8;">
							<p style="background-color: #FAFAFA;margin: 0;width: 34%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">项目名称</p>
							<p style="background-color: #FAFAFA;margin: 0;width: 33%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">单位</p>
							<p style="background-color: #FAFAFA;margin: 0;width: 33%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">单价（元）</p>
							<p style="background-color: #FAFAFA;margin: 0;width: 33%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">数量</p>
							<p style="background-color: #FAFAFA;margin: 0;width: 33%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">金额（元）</p>
						</div>
						<div style="width: 100%;display: flex;flex-direction: row;border: 1px solid #E8E8E8;" >
							<p style="margin: 0;width: 34%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">{{businessObj.itemName}}</p>
							<p style="margin: 0;width: 33%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">{{businessObj.chargeUnitName}}</p>
							<p style="margin: 0;width: 33%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">{{businessObj.examFee ? businessObj.examFee : '免费'}}</p>
							<p style="margin: 0;width: 33%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">1</p>
							<p style="margin: 0;width: 33%;height: 50px;line-height: 50px;">{{businessObj.examFee ? businessObj.examFee : '免费'}}</p>
						</div>
						<div style="width: 100%;display: flex;flex-direction: row;border: 1px solid #E8E8E8;" >
							<p style="margin: 0;width: 40.5%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">总计</p>
							<p style="margin: 0;width: 59.5%;height: 50px;line-height: 50px;border-right: 1px solid #E8E8E8;">{{businessObj.examFee ? businessObj.examFee : '免费'}}</p>
						</div>
					</div> -->

				</div>
			</div>
		</div>
		<!--  退款信息  -->
		<div class="main" v-if="nowStatus">
			<p class="title">退款信息</p>
			<div class="Homechir-sel" style="display: flex;flex-direction: row;min-height: 200px">
				<div style="width: 380px;border-right: 1px solid #E4E9EE;padding-bottom: 10px">
					<p style="width: 350px;margin:0;margin-top: 10px;margin-left: 20px;color: #242526;font-size: 13px;line-height: 22px;height: 22px;">订单编号: {{ refund.orderNumber }}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款发起: 用户发起</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款人: {{ businessObj.memberName ? businessObj.memberName : '暂无退款人' }}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">联系电话: {{ businessObj.memberPhone ? businessObj.memberPhone : '暂无联系电话' }}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 22px;word-wrap:break-word;">退款原因: {{ refund.reason }}</p>
					<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款时间: {{ refund.createTime	 }}</p>
					<p v-if="refund.auditorReason" style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 25px;">驳回原因: {{ refund.auditorReason }}</p>
					<Button type="primary" v-if="refundList && refundList.length > 1" style="margin: 10px 0 0 20px" @click="lookrefundHostry()">
						查看历史退费记录
					</Button>
				</div>
				<div style="width: calc(100% - 380px);padding: 0 30px">
					<p style="width: 95%;color: #F56C6C;height: 60px;line-height: 60px;font-size: 20px;font-weight:500;text-align: left">退款申请进度</p>
					<div class="time" style="width:100%;margin:0 auto 10px;padding:0">
						<span style="width:33%;display:inline-block;height:90%;line-height:26px;">{{refund.createTime?refund.createTime:''}}</span>
						<span style="width:33%;display:inline-block;height:90%;margin:auto;padding:0;line-height:26px;text-align:center">{{refund.auditorTime?refund.auditorTime:''}}</span>
						<span style="width:33%;display:inline-block;height:90%;margin:auto;padding:0;line-height:26px;text-align:right">{{refund.auditorTime?refund.auditorTime:''}}</span>
					</div>
					<Steps :current="refund.auditorTime ? 2 : (refund.auditorTime ? 1 : 0)" align-center process-status="wait">
						<Step title="申请退款时间" style="width: auto" icon="ios-checkmark"></Step>
						<Step title="运营端管理" style="width: auto" icon="ios-checkmark" :content="refund.auditorTime?refund.auditor:''" ></Step>
						<Step v-if="refund.orderStatus === 1 || refund.orderStatus === 0" title="退款到账时间" style="width: auto" icon="ios-checkmark"></Step>
						<Step v-if="refund.orderStatus === 2" title="拒绝退款" style="width: auto" icon="ios-checkmark"></Step>
					</Steps>
				</div>
			</div>
		</div>			
		<!--  历史退款记录  -->
		<div class="main" v-if="hostryStatus">
			<p class="title">历史退款记录</p>
			<Button type="primary" v-if="refundList && refundList.length > 1" style="margin: 10px 0 0 20px" @click="lookrefundNow()">
				查看当前退费记录
			</Button>
			<div v-for="(item,index) in refundList" :key="index" style="border-bottom:1px dashed #999">
				<div class="Homechir-sel" style="display: flex;flex-direction: row;min-height: 200px">
					<div style="width: 380px;border-right: 1px solid #E4E9EE;padding-bottom: 10px">
						<p style="width: 350px;margin:0;margin-top: 10px;margin-left: 20px;color: #242526;font-size: 13px;line-height: 22px;height: 22px;">订单编号: {{ item.orderNumber }}</p>
						<p style="width: 350px;margin:0;margin-top: 10px;margin-left: 20px;color: #242526;font-size: 13px;line-height: 22px;height: 22px;">子订单编号: {{ item.id }}</p>
						<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款发起: 用户发起</p>
						<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款人: {{ businessObj.memberName ? businessObj.memberName : '暂无退款人' }}</p>
						<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">联系电话: {{ businessObj.memberPhone ? businessObj.memberPhone : '暂无联系电话' }}</p>
						<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 22px;word-wrap:break-word;">退款原因: {{ item.reason }}</p>
						<p style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 30px;height: 30px;">退款时间: {{ item.createTime	 }}</p>
						<p v-if="item.auditorReason" style="width: 350px;margin:0;margin-left: 20px;color: #242526;font-size: 13px;line-height: 25px;">驳回原因: {{ item.auditorReason }}</p>
					</div>
					<div style="width: calc(100% - 380px);padding: 0 30px">
						<p style="width: 95%;color: #F56C6C;height: 60px;line-height: 60px;font-size: 20px;font-weight:500;text-align: left">退款申请进度</p>
						<div class="time" style="width:100%;margin:0 auto 10px;padding:0">
							<span style="width:33%;display:inline-block;height:90%;line-height:26px;">{{item.createTime?item.createTime:''}}</span>
							<span style="width:33%;display:inline-block;height:90%;margin:auto;padding:0;line-height:26px;text-align:center">{{item.auditorTime?item.auditorTime:''}}</span>
							<span style="width:33%;display:inline-block;height:90%;margin:auto;padding:0;line-height:26px;text-align:right">{{item.auditorTime?item.auditorTime:''}}</span>
						</div>
						<Steps :current="item.auditorTime ? 2 : (item.auditorTime ? 1 : 0)" align-center process-status="wait">
							<Step title="申请退款时间" style="width: auto" icon="ios-checkmark"></Step>
							<Step title="运营端管理" style="width: auto" icon="ios-checkmark" :content="item.auditorTime?item.auditor:''" ></Step>
							<Step v-if="item.orderStatus === 1 || item.orderStatus === 0" title="退款到账时间" style="width: auto" icon="ios-checkmark"></Step>
							<Step v-if="item.orderStatus === 2" title="拒绝退款" style="width: auto" icon="ios-checkmark"></Step>
						</Steps>
					</div>
				</div>
			</div>				
		</div>			
		<!-- 退费审批按钮 -->
		<div style="width: 100%;height:80px;line-height: 80px;margin-top: 10px; text-align:center;">
			<Button v-if="refund.orderStatus === 0 " type="error" style="margin-right: 20px" @click="refuse">
				<i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>拒绝
			</Button>
			<Button v-if="refund.orderStatus === 0 " type="primary" @click="handleFeeBack" style="margin-right: 20px">
				<Icon type="ios-checkmark" style="margin-right: 5px" /> 同意
			</Button>
			<Button @click="handlebacks">
				<i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>关闭
			</Button>
		</div>
		<Modal
		v-model="fundcode"
		title="拒绝原因"
		:footer="null"> 
			<Input type="textarea" v-model="refund.auditorReason" maxlength="200" placeholder="请输入具体拒绝原因"/>
			<div slot="footer">
				<div class="btn-group" style="text-align:center">
					<Button type="primary" @click="handleFeeBack" style="margin-right: 20px">
						<Icon type="ios-checkmark" style="margin-right: 5px" />确认
					</Button>
					<Button @click="fundcode = false">
						<i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
					</Button>		
				</div>
			</div>
		</Modal>
		<Modal
		v-model="modalcode"
		title="电子申请单"
		styles = "height :100px"
		:footer="null">  
			<div class="electronic">
				<div class="content">
					<div class="header">   
						<p v-if="entity&&entity.inspection==1">健康咨询申请单</p>
						<p v-if="entity&&entity.inspection==2">巡诊申请单</p>     
						<p v-if="entity&&entity.inspection==3">检查申请单</p>
						<p v-if="entity&&entity.inspection==4">检验申请单</p>
						<p v-if="entity&&entity.inspection==5">治疗申请单</p>
						<p v-if="entity&&entity.inspection==6">其他项目申请单</p>
						<!-- <button v-if="entity&&!entity.orderStarts">未缴费</button> -->
						<img v-if="entity.appointmentCode" :src="entity.appointmentCode" alt="">
						<div class="nub">
							<span style="float:left"><b>申请单号</b>&nbsp;:&nbsp;{{entity&&entity.orderNum?entity.orderNum:''}}</span> 
						</div>
					</div>
					<div class="line" style="margin: 0 auto;"></div>
					<div class="essential bian">
						<span>姓名&nbsp;:&nbsp;<small>{{entity.memberName?entity.memberName:'暂无'}}</small></span>
						<span>性别&nbsp;:&nbsp;<small>{{entity.gender === 1 ? '男':entity.gender ===2?'女':'其他'}}</small></span>
						<span>年龄&nbsp;:&nbsp;<small>{{entity.age}}岁</small></span>
						<span>执行科室&nbsp;:&nbsp;<small>{{entity.executiveDepaName}}</small></span>
						<span>问诊ID&nbsp;:&nbsp;<small>{{entity.clinicId}}</small></span><br>
						<span v-if="entity&&entity.inspection==4">标本类型&nbsp;:&nbsp;<small>{{entity.specimenType}}</small></span>
						<span v-else>检查部位&nbsp;:&nbsp;<small>{{entity.checkParts}}</small></span>
						<span>临床诊断&nbsp;:&nbsp;<small>{{entity.assessmentcontent}}</small></span>
					</div>
					<div class="result">
						<p class="title">检测项目：</p>
						<div class="text" v-for="(item,index) in list" :key="index">
							<div>
								<!-- <span class="hosp" v-if="item.ireservation">约</span> -->
								<span style="margin-left: 20px">{{index+1}}.</span>
								<span style="display:inline-block;width:85%">{{item.techName}}</span>
							</div>
						</div>
						<p class="title" v-if="entity&&entity.inspection==4">备注说明：</p>
						<p class="title" v-else>检查目的说明：</p>
						<div class="text" v-for="(item,index) in list" :key="index">
							<div>
							<!-- <p>{{list.description}}</p> -->
								<span style="margin-left: 20px">{{index+1}}.</span>
								<span style="display:inline-block;width:85%">{{item.description}}</span>
							</div>
						</div>						
					</div>
					<div class="line" style="margin: 0 auto;"></div>
					<div class="end">
						<span><b>申请医生</b>&nbsp;:&nbsp;{{entity.doctorName}}</span> 
						<span><b>申请日期</b>&nbsp;:&nbsp;{{entity.createTime}}</span> 
						
					</div>
					<div v-if="entity.tips">
						<p class="tt" v-html="entity.tips"></p>               
					</div>	
				</div>
			</div>   
			<div slot="footer">
				<div class="btn-group" style="text-align:center">
					<Button @click="modalcode = false">
						<i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
					</Button>		
				</div>
			</div>
		</Modal>
  	</div>
</template>

<script>
import api from "@/api/commonApi";
export default {
  name: 'Phachir',
  data() {
    return {
      distriStatus: null,
      fundcode: false,
      modalcode: false,
	  count: {},
	  money: "",
      data1: [],
      columns1: [
        { title: "项目名称", key: "itemName", align: "center"},
        { title: "单位", key: "itemFeeUnit", align: "center"},
        { title: "单价（元）", key: "money", align: "center",
			render:(h,params) => {
				let price = params.row.amt
				let num = params.row.num
				let money = 0
				return [
					h('div', 
						money = Number(price) / Number(num),
						money = money.toFixed(2),
			  		)
				]
			}
		},
        { title: "数量", key: "num", align: "center"},
		{ title: "金额（元）", key: "amt", align: "center",},
      ],
	  auditorReason: '',
	  businessObj: {},
	  order: {},
	  refund: {},
	  id: '',
	  zj: 0,
	  instructions:'',
      list:{},
	  entity: {},
	  refundList: [],
	  hostryStatus: false,
	  nowStatus: true
    }
  },
  created () {
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "",
        title: "退费审批管理"
      },
      {
        path: "operation/prescriptionmanage/ordersearch/review",
        title: "处方退费"
      }
    ];
	this.$emit("changeBreadList", breadList);
  },
  mounted () {
    this.distriStatus = parseInt(localStorage.getItem('orderStatus'));
	this.ishomeget();	
  },
  methods: {	
	//计算总价
	price(){
		this.zj = 0
		if (this.data1 && this.data1.length) {               
			this.data1.map(item => {  
				if(item.num){
					this.zj += Number(item.amt);
				}                
				
			})
		}      
	},
	refuse() {
		// 处理申请按钮
    	this.fundcode = true
	},
	//审核提交
    handleFeeBack() {
		if (this.fundcode == true && !this.refund.auditorReason) {
			this.$Message.error('请填写拒绝原因');
			return
		} else if (this.fundcode == true && this.refund.auditorReason){		
			if(this.refund.orderStatus == 0 ){
				this.refund.orderStatus = 2    //拒绝退款
			} 			
		} else {
			if(this.refund.orderStatus == 0 ){
				this.refund.orderStatus = 4     //退款中
			} 
		}
      const reqBody = { 
        auditorReason : this.refund.auditorReason,
        orderStatus : this.refund.orderStatus
      };
        this.$axios.post(api.RefundAuditor.replace('{id}', this.$route.query.id), reqBody).then(resp => {
			console.log(reqBody)
			this.$Message.success('操作成功');
			this.$router.back();
        	}).catch(err => {
        });
    },
	//查看退费历史记录详情
	lookrefundHostry() {
		this.hostryStatus = true
		this.nowStatus = false
	},
	//查看退费当前记录详情
	lookrefundNow() {
		this.nowStatus = true
		this.hostryStatus = false
	},
	//获取退费详情
    ishomeget () {
      const map = {
      id: this.$route.query.id,
      }
	    console.log('入参 ',map)
	    this.$axios
        .post(api.showDetailByRefundId, map)
        .then(res => {
          if (res.data.code === 1) {
			this.businessObj = res.data.object.businessObj;
            this.order = res.data.object.order;
			this.refund = res.data.object.refund;
			if(res.data.object.businessObj.list){
				this.data1 = res.data.object.businessObj.list
				this.data1.forEach(i =>{
					i.num = i.num ? i.num : i.itemNumber
					i.itemFeeUnit = i.itemFeeUnit ? i.itemFeeUnit : i.itemUnit
					i.amt = i.amt ? i.amt : i.itemAmt
				})
			} else {
				this.data1 = []
			}				
			if(res.data.object.refundList){
				this.refundList = res.data.object.refundList
			} 			
			this.price()
			if(this.businessObj.inspection == 1){
				this.businessObj.inspection = '健康咨询'
			} else if(this.businessObj.inspection == 2) {
				this.businessObj.inspection = '巡诊'
			} else if(this.businessObj.inspection == 3) {
				this.businessObj.inspection = '检查项目'
			} else if(this.businessObj.inspection == 4) {
				this.businessObj.inspection = '检验项目'
			} else if(this.businessObj.inspection == 5) {
				this.businessObj.inspection = '治疗项目'
			} else if(this.businessObj.inspection == 6) {
				this.businessObj.inspection = '其他'
			} 
          } else {
            this.$Message.error("请求异常");
          }
        })
    },
    handleExporDetail() {
      // 处理申请按钮
      this.fundcode = true
    },
    handlebacks() {
      localStorage.removeItem('orderStatus')
      this.$router.back()
	},
	//查看申请单
	search(){
		this.modalcode = true
		let body = {businessId: this.refund.businessId,}
		this.$axios
        .post(api.findPersonMedicalTechnologyById, body)
        .then(res => {
			if(res.data.code == 1){
				this.entity=res.data.object.entity
				this.list=res.data.object.list
				if(this.entity.appointmentCode){
					// this.entity.appointmentCode= this.resourceUrl + JSON.parse(this.entity.appointmentCode)
					this.entity.appointmentCode = this.entity.appointmentCode
				}

				// this.list.forEach((item, i) => {
				// 	if(item.description){
				// 		this.instructions+=item.description+','
				// 	}
				// });
			}
		}).catch(err =>{
			console.log(err);
		});  
	},
  }
}
</script>

<style lang="less" scoped>
  .ivu-steps {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    font-size: 0;
    line-height: 1.5;
  }
  .ivu-steps-item:last-child{
    flex: none !important;
  }
  .Homechir .ivu-steps-item{
    display: inline-block;
    position: relative;
    vertical-align: top;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
  }
  .Homechir {
	padding: 15px 0; 
	width: 100%;
	background: #ffffff;
	box-sizing: border-box;
	.tit {
		margin:10px 0;
		font-weight:bold;
		text-align:center;
	}
	.main{
        width: 98%;
        display: flex;
        flex-direction: column;
        margin: 10px auto;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        margin-bottom: 20px;
        .title {
            font-size: 20px;
            padding-left: 15px;
            margin-bottom: 20px;
            color: #333;
            height: 40px;
            line-height: 40px;
            background: #ebedf8;   
        }      
        .w-select {
            width: 100px;
        }
        .box{
            padding: 0 30px;
        }
    }
    .Homechir-one,
    .Homechir-sel{
		width: calc(100% );
		margin: auto;
		min-height: 130px;
		background-color: white;
	}
	.btn{
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
}  	
  .electronic{
        width: 100%;
        height: 100%;
		background-color: #fff;
		padding: 0;
		margin: 0;
        .hosp{
            display: inline-block;
            margin: 0 5px;
            font-size: 14px;
            text-align: center;
            line-height: 32px;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            border:1px solid #999;
        }
        .content{
            width: 100%;
			padding: 0;
			margin: 0;
			background-size:cover;
			padding-top: 15px;
            // position: relative;
            // top:0;
            // left:0;           
            // overflow: scroll;
			background-image: url('../../../assets/images/report_bg.jpg');
			padding-bottom: 20px;
            .header{
                width: 95%;
                min-height: 100px;
                // padding: 40px 25px 30px 25px;
                text-align: center;
                position: relative;
                button{
                    background: #fff;
                    color: #999;
                    border: 1px solid #999;
                    position:absolute;
                    top: 35px;
                    right: 20px;
                    // float: right;
                    width: 150px;
                    height: 60px;
                    font-size: 26px;
                }
                p{
                    font-size:20px;
                    color: #333;
                    font-weight: 500;
					margin-bottom: 10px;
					height: 40px;
					line-height: 40px;
                }
                // p:nth-child(2){
                //     font-size:40px;
                //     color: #333;
                //     font-weight: 550;
                // }
                // p:nth-child(3){
                //     border: 1px solid #999;
                //     width: 100px;
                //     height: auto;
                //     line-height: 40px;
                //     color: #333;
                //     font-size: 24px;
                //     position: absolute;
                //     top: 20px;
                //     left: 25px;
                // }
                img{
                    width: 85px;
                    height: 85px;
                    position: absolute;
                    top: 0px;
					right: 0px;
					margin-bottom: 15px;
                }
                .nub{
					position: absolute;
                    bottom: 15px;
					left: 0px;
                    span{
                        color: #333;
						font-size: 14px;
						margin-left: 15px;
                        b{
                            color: #999;
                            font-size: 12px;
                        }
                    }
                }
			}
			.line{
                width: 95%;
                height: 10px;
                border-top:2px solid #333333;
                border-bottom:2px solid #333333;
            }
            .essential{
                width: 95%;
                // min-height: 140px;
                margin-left: 15px;
                padding: 15px 0;
                border-bottom:1.5px solid #cccccc;
                box-sizing: border-box;
                span{
                    color: #999;
                    font-size: 12px;
                    line-height: 30px;
                    display: inline-block;
                    text-align: left;
                    small{
                        color: #333;
                        font-size: 14px;
                        font-weight: 500;
                    }
                }
                span:nth-child(1){
					min-width: 200px;
                }
                span:nth-child(2){
					min-width: 120px;
                }
                span:nth-child(4){
					min-width: 200px;
                }
                span:nth-child(6){
					min-width: 100%;
					background-color: pink;
                }
                span:nth-child(7){
					min-width: 100%;
                }
                span:nth-child(8){
					min-width: 100%;
                }
            }
            .result{
                width: 95%;
                // min-height: 200px;
                margin-left: 15px;
                position: relative;
                .title{
                    color: #999;
                    font-size: 12px;
                    margin: 15px 0;
                }
                .dhei{
                    // min-height: 280px;
                    border-bottom:1px dashed #cccccc;
                }
                .text{
                    color: #333;
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 25px;
                    letter-spacing: 1px;
                    // padding-bottom: 10px;
                }
                .nub{
                        font-size: 24px;
                        color: #999;
						margin-bottom: 20px;
                }
                img{
                    width: 148px;
                    height: 149px;
                    position: absolute;
                    bottom: 25px;
                    right: 0px;
                }
			}
			.end{
				width: 95%;
                // min-height: 140px;
                margin-left: 15px;
                padding: 15px 0;               
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				span{
                    color: #333;
                    font-size: 14px;
                    display: inline-block;
					text-align: left;
					font-weight: 500;
					margin-bottom: 20px;
                    b{
                        color: #999;
                        font-size: 12px;                       
					}
				}
				
			}
			.tt{
				width: 100%;
				border: 1px solid #999;
				min-height: 300px;
				overflow-y: scroll;
				color: #333;
				font-size: 16px;
				line-height: 25px;
				text-indent: 60px;
				font-weight: 500;
				letter-spacing: 1px;
			}
        }
    }
</style>
